<template>
    <div class="analysis">
        <div class="top">
            <div class="gqysrsfx">
                <about>
                    <div slot="about">各区用水人数分析</div>
                </about>
                <div class="echarts-gqysrsfx" id="echarts6">
                    
                </div>
            </div>
            <div class="qqjstystj">
                <div class="titss">全区近10天用水统计</div>
                <div class="echarts-qqjstystj" id="echarts7">
                    
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="gqysphb">
                <about>
                    <div slot="about">各区用水排行榜</div>
                </about>
                <div class="echarts-gqysphb" id="echarts8">
                    
                </div>
            </div>
            <div class="sqlrsl">
                <about>
                    <div slot="about">社区老人数量</div>
                </about>
                <div class="echarts-sqlrsl">
                    <div><span>10403</span><span>和平小区</span></div>
                    <div><span>10403</span><span>和平小区</span></div>
                    <div><span>10403</span><span>和平小区</span></div>
                    <div><span>10403</span><span>和平小区</span></div>
                    <div><span>10403</span><span>和平小区</span></div>
                </div>
            </div>
            <div class="sqsjl">
                <about>
                    <div slot="about">社区事件量TOP5</div>
                </about>
                <div class="echarts-sqsjl" id="echarts9">
                    
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="sqhsydjlrhzb">
                <about>
                    <div slot="about">社区户数与独居老人户占比</div>
                </about>
                <div class="echarts-sqhsydjlrhzb">
                    <div id="echarts10"></div>
                    <div id="echarts11"></div>
                </div>
            </div>
            <div class="sjyjsjdfb">
                <about>
                    <div slot="about">事件预警时间段分布</div>
                </about>
                <div class="echarts-sjyjsjdfb"  id="echarts12">
                    
                </div>
            </div>
            <div class="ycsjtjzst">
                <about>
                    <div slot="about">异常事件统计走势图</div>
                </about>
                <div class="echarts-ycsjtjzst" id="echarts13">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import About from '../../About.vue'
import * as echarts from "echarts"
export default {
    name: 'AnalysisList',
    data() {
        return {
            listData: [
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'}
            ]
        }
    },
    components: {
        About
    },
    methods:{
        echarts6() {
            let myChart = echarts.init(document.getElementById("echarts6"));
            // 绘制图表
            var option = {
                color: ["#2C62FB", "#65D4C5", "#F7BB33", "#58AD3B","#E35EFC", "#914CE5", "#6173D6", "#4CB8EE","#76F9FB", "#FAF494", "#EF9EC2", "#E6457F"],
                tooltip: {
                    show: true,
                },
                legend: {
                    textStyle: {
                        color: "#dffdff",
                        fontSize:16
                    },
                    itemHeight: 4,
                    itemWidth: 15,
                    itemGap: 10,
                    icon: "rect",
                    bottom: 10,
                    x: "center",
                    data: ['临朐县', '乐昌县', '青州市', '诸城市', '寿光市', '安丘市', '高密市', '昌邑区', '潍城区', '寒亭区', '坊子区', '奎文区'],
                },
                graphic: [
                {
                    //环形图中间添加文字
                    type: "text", //通过不同top值可以设置上下显示
                    left: "center",
                    top: "48%",
                    style: {
                        text: "占比",
                        textAlign: "center",
                        fill: "rgba(200,232,250,0.8)", //文字的颜色
                        fontSize: 20,
                    },
                },
                ],
                series: [{
                    name: "老人年龄段分布",
                    type: "pie",
                    radius: ["40%", "60%"],
                    label: {
                    fontStyle: "normal",
                    alignTo: "edge",
                    formatter: "{text|{b}}\n{value|{d}%}\n",
                    minMargin: 5,
                    edgeDistance: 10,
                    padding: [0, 0, 50, 0],
                    rich: {
                        text: {
                            fontSize: 16,
                            lineHeight: 20,
                            color: "#DFFDFF",
                            },
                            value: {
                            fontSize: 18,
                            lineHeight: 15,
                            color: "#DFFDFF"
                            },
                        },
                    },
                    labelLine: {
                        length: 15,
                        length2: 5,
                        maxSurfaceAngle: 80,
                    },
                    labelLayout: function (params) {
                        var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        var points = params.labelLinePoints;
                        // Update the end point.
                        points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                        return {
                            labelLinePoints: points,
                        };
                    },
                    data: [
                        { value: 1048, name: "临朐县" },
                        { value: 735, name: "乐昌县" },
                        { value: 580, name: "青州市" },
                        { value: 580, name: "诸城市" },
                        { value: 1048, name: "寿光市" },
                        { value: 735, name: "安丘市" },
                        { value: 580, name: "高密市" },
                        { value: 580, name: "昌邑区" },
                        { value: 1048, name: "潍城区" },
                        { value: 735, name: "寒亭区" },
                        { value: 580, name: "坊子区" },
                        { value: 580, name: "奎文区" },
                    ]
                }],
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts7() {
            let myChart = echarts.init(document.getElementById("echarts7"));
            // 绘制图表
            var option = {
                tooltip : {
                    formatter: function(params) {
                        return params.name + "：" + params.value + 'L';
                    },
                    backgroundColor:'#65D4C5',//通过设置rgba调节背景颜色与透明度
                    borderWidth:0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                xAxis: {
                    axisTick: {show: false},
                    axisLabel: {
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                        color: "#dffdff",  //刻度线标签颜色
                        fontSize: 16
                    },
                    axisLine: {
                        show: true,//不显示坐标轴线
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                    },
                    type: 'category',
                    data: ['3-30', '3-31', '4-01', '4-02', '4-03', '4-04', '4-05', '4-06', '4-07', '4-08']
                },
                yAxis: {
                    type: 'value',
                    name: '(mm)',
                    nameTextStyle:{
                        fontSize: 16,
                        color: '#dffdff'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#1A52A6'
                        }
                    },
                    axisTick: {show: false},
                    axisLine: {
                        show: true,//不显示坐标轴线
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                    },
                    axisLabel: {
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                        color: "#dffdff",  //刻度线标签颜色
                        fontSize: 16
                    },
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 80, 88, 30],
                    type: 'bar',
                    barWidth : 25,
                    itemStyle: {
                        normal: {
                            label : {
                                show: true,
                                position: 'top',//显示位置 
                                textStyle: { //文字样式
                                    color: '#76F9FB',
                                    fontSize:18
                                }
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#48B6FB'
                                }, {
                                offset: 1,
                                color: '#0C4AFB'
                            }])
                        }
                    }
                }]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts8() {
            let myChart = echarts.init(document.getElementById("echarts8"));
            // 绘制图表
            var option = {
                grid: {
                    left:'3%',
                    right:'4%',
                    bottom:'3%',
                    containLabel:true
                },
                xAxis: {
                    show: 'false',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['临朐县', '乐昌县', '青州市', '诸城市', '寿光市', '安丘市', '高密市', '昌邑区', '潍城区', '寒亭区', '坊子区', '奎文区'],
                    axisLabel: {
                        textStyle: {
                            fontSize: '16'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show:false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    type: 'bar',
                    barWidth: '60%',
                    color: '#1890ff',
                    data: [120, 150, 80, 70, 110, 130, 59, 276, 66, 188, 199, 33, 88],
                    itemStyle: {
                        normal: {
                            lable: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#76F9FB',
                                    fontSize: 18
                                }
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#48B6FB'
                                }, {
                                offset: 1,
                                color: '#0C4AFB'
                            }])
                        }
                    }
                }]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts9() {
            let myChart = echarts.init(document.getElementById("echarts9"));
            var BorderWidth = '10';
            //反方向剩下部分的样式
            var placeHolderStyle = {
                normal: {
                       label: {
                                normal: {
                                    position: 'inner'
                                }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    color: "#24317A",
                    borderColor: "#24317A",
                    borderWidth: 12
                },
                emphasis: {
                    color: "#dedede",
                    borderColor: "#dedede",
                    borderWidth: 10
                },
            }
            // 绘制图表
            var option = {
                color: ['#2C62FB', '#E35EFC', '#FDF731', '#65D4C5', "#F7BB33"],
                legend: {
                    show: true,
                    orient:'horizontal',
                    y:'bottom',
                    align: 'left',
                    data: ['正常', '次要', '警告','重要','严重'],
                    textStyle:{
                        color:'#fff',
                        fontSize:16
                    }
                },
                series: [{
                    name: '正常',
                    type: 'pie',
                    clockWise: true, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [100, 101],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'outside'
                            },
                            labelLine: {
                                show: false,
                                length: 100,
                                smooth: 0.5
                            },
                            borderWidth: BorderWidth,
                            shadowBlur: 40,
                            borderColor: "#2C62FB",
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    },
                    label: {
                        normal: {
                            show: true,   
                            position: 'outside',
                            textStyle: {
                                color: '#2C62FB',  // 改变标示文字的颜色
                                fontSize: 20
                            }

                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 80,
                            lineStyle: {
                                color: '#2C62FB'
                            }
                        }
                    },
                    data: [{
                        value: 7,
                        name: '70%'
                    },
                    {
                        value: 3,
                        name: '',
                        itemStyle: placeHolderStyle,
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    }
                    ]
                }, {
                    name: '次要',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [80, 81],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false,
                                length: 100,
                                smooth: 0.5
                            },
                            borderWidth: BorderWidth,
                            shadowBlur: 40,
                            borderColor: "#E35EFC",
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    },
                    label: {
                        normal: {
                            show: true,   
                            position: 'outside',
                            textStyle: {
                                color: '#E35EFC',  // 改变标示文字的颜色
                                fontSize: 20
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 20,
                            length2: 80,
                            lineStyle: {
                                color: '#E35EFC'
                            }
                        }
                    },
                    data: [{
                        value: 6,
                        name: '60%'
                    }, 
                    {
                        value: 4,
                        name: '',
                        itemStyle: placeHolderStyle,
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    }
                    ]
                },  {
                    name: '警告',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [60, 61],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false,
                                length: 150,
                                smooth: 0.5
                            },
                            borderWidth: BorderWidth,
                            shadowBlur: 40,
                            borderColor: "#FDF731",
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    },
                    label: {
                        normal: {
                            show: true,   
                            position: 'outside',
                            textStyle: {
                                color: '#FDF731',  // 改变标示文字的颜色
                                fontSize: 20
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 70,
                            length2: 80,
                            lineStyle: {
                                color: '#FDF731'
                            }
                        }
                    },
                    data: [{
                        value: 2,
                        name: '20%'
                    }, 
                    {
                        value: 5,
                        name: '',
                        itemStyle: placeHolderStyle,
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    }
                    ]
                },  {
                    name: '重要',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [40, 41],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false,
                                length: 100,
                                smooth: 0.5
                            },
                            borderWidth: BorderWidth,
                            shadowBlur: 40,
                            borderColor: "#65D4C5",
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    },
                    label: {
                        normal: {
                            show: true,   
                            position: 'outside',
                            textStyle: {
                                color: '#65D4C5',  // 改变标示文字的颜色
                                fontSize: 20
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 60,
                            length2: 80,
                            lineStyle: {
                                color: '#65D4C5'
                            }
                        }
                    },
                    data: [{
                        value: 4,
                        name: '40%'
                    }, 
                    {
                        value: 5,
                        name: '',
                        itemStyle: placeHolderStyle,
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    }
                    ]
                }, {
                    name: '严重',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [20, 21],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false,
                                length: 100,
                                smooth: 0.5
                            },
                            borderWidth: BorderWidth,
                            shadowBlur: 40,
                            borderColor: "#F7BB33",
                            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                        }
                    },
                    label: {
                        normal: {
                            show: true,   
                            position: 'outside',
                            textStyle: {
                                color: '#F7BB33',  // 改变标示文字的颜色
                                fontSize: 20
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 100,
                            length2: 80,
                            lineStyle: {
                                color: '#F7BB33'
                            }
                        }
                    },
                    data: [{
                        value: 3,
                        name: '美丽家园：30%'
                    }, 
                    {
                        value: 6,
                        name: '',
                        itemStyle: placeHolderStyle,
                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                                normal: {
                                    show: false
                                }
                        }, 
                    }
                    ]
                }]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts10() {
            let myChart = echarts.init(document.getElementById("echarts10"));
            // 绘制图表
            let option = {
                title: {
                    text: '社区户数',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize:22,
                        fontWeight:'normal',
                        color: ['#fff']
                    },
                    subtextStyle: {
                        color: '#666',
                    },
                    top:280,   //标题文字距离顶部距离
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        symbolMargin: 6,
                        data: [
                            {
                                value: '136', 
                                name: '社区户数',
                                label: {
                                    normal: {
                                        formatter: function(params){
                                            return params.value;
                                        },
                                        position: 'center',
                                        show: true,
                                        textStyle: {
                                            fontSize: '60',
                                            fontWeight: 'bold',
                                            color: '#FDF731',
                                        }
                                    }
                                },
                                itemStyle:{   //自定义圆环图颜色
                                    normal:{
                                        color: '#42A8E9'   
                                    }
                                }
                            },
                            {
                                value: 500, 
                                name: '剩余',
                                itemStyle:{   //自定义圆环图颜色
                                normal:{
                                    color:'#05458d'
                                }
                            }
                            }
                        ]
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts11() {
            let myChart = echarts.init(document.getElementById("echarts11"));
            // 绘制图表
            let option = {
                title: {
                    text: '独居老人户',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize:22,
                        fontWeight:'normal',
                        color: ['#fff']
                    },
                    subtextStyle: {
                        color: '#666',
                    },
                    top:280,   //标题文字距离顶部距离
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: [
                            {
                                value: '136', 
                                name: '独居老人户',
                                label: {
                                    normal: {
                                        formatter: function(params){
                                            return params.value;
                                        },
                                        position: 'center',
                                        show: true,
                                        textStyle: {
                                            fontSize: '60',
                                            fontWeight: 'bold',
                                            color: '#FDF731',
                                        }
                                    }
                                },
                                itemStyle:{   //自定义圆环图颜色
                                    normal:{
                                        color: '#42A8E9'   
                                    }
                                }
                            },
                            {
                                value: 500, 
                                name: '剩余',
                                itemStyle:{   //自定义圆环图颜色
                                normal:{
                                    color:'#05458d'
                                }
                            }
                            }
                        ]
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts12() {
            let myChart = echarts.init(document.getElementById("echarts12"));
            // 绘制图表
            let option = {
                tooltip : {
                    formatter: function(params) {
                        return params.name + "：" + params.value + 'L';
                    },
                    backgroundColor:'#65D4C5',//通过设置rgba调节背景颜色与透明度
                    borderWidth:0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                xAxis: {
                    axisTick: {show: false},
                    axisLabel: {
                        interval: 0, 
                        rotate: 30,
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                        color: "#dffdff",  //刻度线标签颜色
                        fontSize: 16
                    },
                    axisLine: {
                        show: true,//不显示坐标轴线
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                    },
                    type: 'category',
                    data: ['3-30', '3-31', '4-01', '4-02', '4-03', '4-04', '4-05', '4-06', '4-07', '4-08', '4-09', '4-10']
                },
                yAxis: {
                    type: 'value',
                    name: '(mm)',
                    nameTextStyle:{
                        fontSize: 16,
                        color: '#dffdff'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#1A52A6'
                        }
                    },
                    axisTick: {show: false},
                    axisLine: {
                        show: true,//不显示坐标轴线
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                    },
                    axisLabel: {
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                        color: "#dffdff",  //刻度线标签颜色
                        fontSize: 16
                    },
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 80, 88, 30, 50, 20],
                    type: 'bar',
                    barWidth : 25,
                    itemStyle: {
                        normal: {
                            label : {
                                show: true,
                                position: 'top',//显示位置 
                                textStyle: { //文字样式
                                    color: '#76F9FB',
                                    fontSize:18
                                }
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6FE9E1'
                                }, {
                                offset: 1,
                                color: '#52AC99'
                            }])
                        }
                    }
                }]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts13() {
            let myChart = echarts.init(document.getElementById("echarts13"));
            // 绘制图表
            let option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) {
                        console.log(params)
                        return JSON.stringify(params[0].axisValue) + "：" + params[0].data + '人次';
                    },
                    backgroundColor:'#F7BB33',//通过设置rgba调节背景颜色与透明度
                    borderWidth:0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                grid: {
                    left: 30,
                    right:20,
                    top:30,
                    bottom:30

                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 18
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        boundaryGap : false,
                        data:['0时','2时','4时','6时','8时','10时','12时','14时','16时','18时','20时','22时']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine:true,
                        name: '(次)',
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#dffdff'
                        },
                        axisTick:{
                            show:true//不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 16
                        },
                        
                        /*data : ['0','20','40','60','80','100']*/
                    }
                ],
                series : [
                    {
                        type:'line',
                        color:'#F7BB33',
                        smooth:true,//设置折线图平滑
                        data:[20, 40, 70, 50, 40, 80, 20, 40, 70, 50, 100, 90],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#F7BB33" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#F7BB33',//折点颜色
                                lineStyle:{
                                    color:'#F7BB33' //折线颜色
                                }
                            }
                        }
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
    },
    mounted() {
        this.echarts6()
        this.echarts7()
        this.echarts8()
        this.echarts9()
        this.echarts10()
        this.echarts11()
        this.echarts12()
        this.echarts13()
    }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/style/index";
    .analysis{
        width: 2304px;
        height: 1950px;
        float: left;
        .top{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            .gqysrsfx{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-gqysrsfx{
                    flex: 1;
                }
            }
            .qqjstystj{
                flex: 2;
                display: flex;
                flex-direction: column;
                .titss{
                    width: calc(100% - 108px);
                    height: 82px;
                    line-height: 82px;
                    background: url(../../../assets/images/list_shuang.png) no-repeat;
                    background-size: 100% 100%;
                    padding-left: 108px;
                    color: $color-white;
                    font-size: 38px;
                    margin-bottom: 30px;
                    text-align: left;
                }
                .echarts-qqjstystj{
                    flex: 1;
                }
            }
        }
        .middle{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            margin-top: 50px;
            .gqysphb{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-gqysphb{
                    flex: 1;
                }
            }
            .sqlrsl{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-sqlrsl{
                    flex: 1;
                    div{
                        width: 203px;
                        height: 110px;
                        float: left;
                        @include bg-sqrs;
                        margin: 100px 0 0 79px;
                        span:nth-child(1){
                            width: 203px;
                            height: 50px;
                            text-align: center;
                            font-size: 40px;
                            color: $color-white3;
                            display: inline-block;
                            margin-top: -30px;
                        }
                        span:nth-child(2){
                            width: 203px;
                            height: 30px;
                            text-align: center;
                            font-size: 22px;
                            color: $color-white2;
                            display: inline-block;
                        }
                    }
                    div:nth-child(1){
                        margin-left: 0;
                    }
                    div:nth-child(4){
                        margin-left: 141px;
                    }
                }
            }
            .sqsjl{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-sqsjl{
                    flex: 1;
                }
            }
        }
        .bottom{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            margin-top: 50px;
            .sqhsydjlrhzb{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-sqhsydjlrhzb{
                    flex: 1;
                    #echarts10{
                        width: 384px;
                        height: 500px;
                        float: left;
                    }
                    #echarts11{
                        width: 384px;
                        height: 500px;
                        float: left;
                    }
                }
            }
            .sjyjsjdfb{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-sjyjsjdfb{
                    flex: 1;
                    
                }
            }
            .ycsjtjzst{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-ycsjtjzst{
                    flex: 1;
                }
            }
        }
    }
</style>